<!--跨模板引用-->
<script setup>
import FirstSon from '@/components/FirstSon.vue'
import {ref, provide} from 'vue'
// 顶层父组件 跨层向secondComponent传递普通对象  key 需要保持一致
// 语法：provide('key',值)
const count = ref(100)
provide('countKey', count)

const changeCount = () => {
  count.value++
}

// 子组件不能修改父组件中的数据，应该遵循谁的数据谁维护原则，但是可以给子组件提供一个函数，由父组件决定是否需要修改
provide('sonChangeCount', (newCount) => {
  setTimeout(() => {
    count.value = newCount
  }, 1000)
})

</script>
<template>
  <div class="app">
    顶层组件,定义的属性值为{{ count }}
    <button @click="changeCount">修改顶层属性</button>
    <FirstSon></FirstSon>
  </div>
</template>
<style scoped>
.app {
  background: #ccc;
  width: 600px;
  height: 600px;
}
</style>
